<!--  -->
<script setup>
import { computed, ref, reactive, watch } from "vue";
import { NBreadcrumb, NBreadcrumbItem, NCarousel, NSkeleton } from "naive-ui";
import store from "@/store";
import { findBanner } from "@/api/home";
import { findTopCategory } from "@/api/category";
import { useRoute } from "vue-router";

const route = useRoute();

// 商品类目数据
let category = ref(null);

const topCategory = computed(() => {
  let cate = {};
  const item = store.state.category.list.find((item) => {
    return item.id === route.params.id;
  });
  // 获取商品类目数据
  findTopCategory(route.params.id).then((res) => {
    category.value = res.children;
  });
  if (item) cate = item;
  return cate;
});

// 轮播图
let bannerImg = reactive([]);
findBanner().then((res) => {
  bannerImg.push(...res);
});
</script>

<template>
  <div class="top-category" style="background-color: #fbfbfb">
    <div class="container">
      <!-- 面包屑 -->
      <n-breadcrumb style="padding: 20px 0px">
        <n-breadcrumb-item href="/">首页</n-breadcrumb-item>
        <n-breadcrumb-item>{{ topCategory.name }}</n-breadcrumb-item>
      </n-breadcrumb>
    </div>
    <div class="container">
      <n-skeleton
        height="500px"
        width="1240px"
        v-if="bannerImg.length <= 0"
      ></n-skeleton>
      <!-- 轮播图 -->
      <n-carousel show-arrow autoplay v-else>
        <img v-for="item in bannerImg" :key="item.id" v-lazy="item.imgUrl" />
        <template #arrow="{ prev, next }">
          <div class="custom-arrow">
            <button type="button" class="curtom-arrow--left" @click="prev">
              <i class="iconfont icon-left"></i>
            </button>
            <button type="button" class="curtom-arrow--right" @click="next">
              <i class="iconfont icon-right"></i>
            </button>
          </div>
        </template>
        <template #dots="{ total, currentIndex, to }">
          <ul class="custom-dots">
            <li
              v-for="index of total"
              :class="{ ['is-active']: currentIndex === index - 1 }"
              :key="index"
              @click="to(index - 1)"
            ></li>
          </ul>
        </template>
      </n-carousel>
    </div>
    <div class="container">
      <!-- 全部分类 -->
      <div class="sub-list">
        <h3>全部分类</h3>
        <ul>
          <li v-for="item in topCategory.children" :key="item.id">
            <router-link :to="`/category/sub/${item.id}`">
              <img v-lazy="item.picture" />
              <p>{{ item.name }}</p>
            </router-link>
          </li>
        </ul>
      </div>
      <!-- 各个商品分类 -->
      <div class="ref-goods" v-for="item in category" :key="item.id">
        <div class="head">
          <h3>- {{ item.name }} -</h3>
          <p class="tag">{{ item.desc }}</p>
          <More :path="`/category/sub/${item.id}`"></More>
        </div>
        <div class="body">
          <GoodsItem v-for="g in item.goods" :key="g.id" :goods="g" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='less' scoped>
@import url("@/assets/style/category.less");
</style>